<template>
    <div class="page-table-wrap">
        <!--数据表格-->
        <el-table
                :data="tableData"
                tooltip-effect="dark"
                size="mini"
                border
                stripe
                v-loading="loading"
                @selection-change="handleSelectionChange">
            <el-table-column v-if="selection" type="selection" width="50" align="center"></el-table-column>
            <template v-for="(column, index) in columns">
                <slot v-if="column.slot" :name="column.slot"></slot>
                <el-table-column
                        v-else
                        v-bind="column">
                </el-table-column>
            </template>
        </el-table>

        <!--是否开启分页-->
        <el-pagination
                class="page-wrapper"
                v-if="pagination"
                background
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.totalCount"
                :page-sizes="[10, 20, 50, 100]"
                layout="prev, pager, next, total, sizes, jumper"

                @size-change="handlePageSizeChange"
                @current-change="handleCurrentPageChange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "PageTable",
        data() {
            return {
                selectedData: []
            }
        },
        props: {
            tableData: Array,
            loading: Boolean,
            selection: Boolean,
            columns: Array,
            pagination: Object
        },
        methods: {
            getSelectedData() {
                return this.selectedData;
            },

            handleSelectionChange(selection) {
                this.selectedData = selection;
            },

            handlePageSizeChange(pageSize) {
                this.$emit("page-size-change", pageSize)
            },
            handleCurrentPageChange(currentPage) {
                this.$emit("current-page-change", currentPage)
            }
        }
    }
</script>